<script lang="ts" setup>
import Person from '@/components/Person.vue'
import {
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onMounted,
  onUnmounted,
  onUpdated,
  ref,
} from 'vue'

let isShow = ref(false)

/**
 * - Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
 *      - beforeCreate===> setup()
 *      - created=======> setup()
 *      - beforeMount ===>onBeforeMount
 *      - mounted=======>onMounted
 *      - beforeUpdate===>onBeforeUpdate
 *      - updated =======>onUpdated
 *      - beforeUnmount ==>onBeforeUnmount
 *      - unmounted =====>onUnmounted
 * 其中，beforeCreate、created没有提供组合式api，其中setup就相当于是beforeCreate、created，这两种方式生命周期钩子。
 */
// Vue3最大的特点就是组合式api，使用组合式api向setup里面写声明周期钩子。
// 通过组合式API的形式去使用生命周期钩子。
// 输出创建beforeCreate、created，在vue3里面都是使用setup()替换了。
console.log('父组件 创建，beforeCreate===> setup()，created=======> setup()')

onBeforeMount(() => {
  console.log('---父组件 Vue3生命周期 1、挂载之前：onBeforeMount---')
})
onMounted(() => {
  console.log('---父组件 Vue3生命周期 2、挂载完毕：onMounted---')
})
onBeforeUpdate(() => {
  console.log('---父组件 Vue3生命周期 3、更新之前：onBeforeUpdate---')
})
onUpdated(() => {
  console.log('---父组件 Vue3生命周期 4、更新完毕：onUpdated---')
})
// Vue3生命周期里面的是，卸载之前
onBeforeUnmount(() => {
  console.log('---父组件 Vue3生命周期 5、卸载之前：onBeforeUnmount---')
})
// Vue3生命周期里面的是，卸载完毕
onUnmounted(() => {
  console.log('---父组件 Vue3生命周期 6、卸载完毕：onUnmounted---')
})
</script>

<template>
  <div class="app">
    <h1>我是 App 根组件！</h1>
    <Person v-if="!isShow" />
  </div>
</template>

<style scoped>
.app {
  background-color: #2fbd4e;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>
